<template>
   <div class="person">
       <el-row :gutter="20">
        <el-col :span="6" :xs="24">
           <el-card class="box-card">
              <template v-slot:header>
                <div class="clearfix">
                  <span>个人信息</span>
                </div>
              </template>
              <div>
                 <div class="text-center">
                    <userAvatar />
                 </div>
                 <ul class="list-group list-group-striped">
                    <li class="list-group-item">
                       用户名称
                       <div class="pull-right">{{ name }}</div>
                    </li>
                    <li class="list-group-item">
                       用户昵称
                       <div class="pull-right">{{ nickName   }}</div>
                    </li>
                    <li class="list-group-item">
                       用户性别
                       <div class="pull-right">{{ sex==0?'男':(sex==1?'女':'未知')   }}</div>
                    </li>
                    <li class="list-group-item">
                       手机号码
                       <div class="pull-right">{{ phone }}</div>
                    </li>
                    <li class="list-group-item">
                       用户邮箱
                       <div class="pull-right">{{ email }}</div>
                    </li>
                    <li class="list-group-item">
                       所属学校
                       <div class="pull-right" v-if="schoolId"> {{ getSchoolName() }} </div>
                    </li>
                    <li class="list-group-item">
                       所属学院
                       <div class="pull-right" v-if="collegeId"> {{ getCollegeName() }} </div>
                    </li>
                    <li class="list-group-item">
                       所属专业
                       <div class="pull-right" v-if="specialtyId">{{ getSpecialtyName() }}</div>
                    </li>
                    <li class="list-group-item">
                       所在年级
                       <div class="pull-right" v-if="grade">{{ getGradeName() }}</div>
                    </li>
                    <li class="list-group-item">
                       所属角色
                       <div class="pull-right">{{ state.roleGroup }}</div>
                    </li>
                    <li class="list-group-item">
                       上次登录时间
                       <div class="pull-right">{{ lastLoginTime }}</div>
                    </li>
                 </ul>
              </div>
           </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
           <el-card>
              <template v-slot:header>
                <div class="clearfix">
                  <span>修改信息</span>
                </div>
              </template>
              <el-tabs v-model="activeTab">
                 <el-tab-pane label="修改基本信息" name="userinfo">
                    <userInfo />
                 </el-tab-pane>
                 <el-tab-pane label="修改密码" name="resetPwd">
                    <resetPwd />
                 </el-tab-pane>
                 <el-tab-pane label="修改邮箱" name="resetEmail">
                    <resetEmail />
                 </el-tab-pane>
              </el-tabs>
           </el-card>
        </el-col>
     </el-row>
   </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import resetEmail from "./resetEmail";
import { getUserProfile } from "@/api/system/user";
import useUserStore from '@/store/modules/user';
import useBaseStore from '@/store/forum/base';
import {parseTime} from '@/utils/ruoyi';

export default {
   components:{
       userAvatar,
       resetPwd,
       userInfo,
       resetEmail
   },
   data(){
        return {
            post:{
                content: ""
            },
            activeTab: "userinfo",
            state: {
                user: {},
                roleGroup: {},
                postGroup: {}
            },
        }
   },
   computed: {
     id(){
         return useUserStore().id;
     },
     name(){
         return useUserStore().name;
     },
     avatar(){
         return useUserStore().avatar;
     },
     nickName(){
         return useUserStore().nickName;
     },
     sex(){
         return useUserStore().sex;
     },
     phone(){
         return useUserStore().phone;
     },
     email(){
         return useUserStore().email;
     },
     schoolId(){
         return useUserStore().schoolId;
     },
     collegeId(){
         return useUserStore().collegeId;
     },
     specialtyId(){
         return useUserStore().specialtyId;
     },
     grade(){
         return useUserStore().grade;
     },
     lastLoginTime(){
        return parseTime(new Date(useUserStore().lastLoginTime).getTime());
     },
   },
   created(){
        this.getUser();
   },
   methods:{
      getGradeName(){
         return this.grade+"级";
      },
      getUser() {
          getUserProfile().then(response => {
            this.state.user = response.data;
            this.state.roleGroup = response.roleGroup;
            this.state.postGroup = response.postGroup;
          });
       },
       getSchoolName(){
            if(useBaseStore().isLoadSchool){
               var school = useBaseStore().getSchoolForId(this.schoolId);
               // console.log('school',school);
               if(school!=null){
                  return school.name;
               }
               return '';
            }else{
               return '';
            }
       },
       getCollegeName(){
            if(useBaseStore().isLoadCollege){
               var college = useBaseStore().getCollegeForId(this.collegeId);
               // console.log('college',college);
               if(college!=null){
                  return college.name;
               }
               return '';
            }else{
               return '';
            }
       },
       getSpecialtyName(){
            if(useBaseStore().isLoadSpecialty){
               var specialty = useBaseStore().getSpecialtyForId(this.specialtyId);
               // console.log('specialty',specialty);
               if(specialty!=null){
                  return specialty.name;
               }
               return '';
            }else{
               return '';
            }
       }
   }
}

</script>

<style lang="scss" scoped>
.person{
    margin: 30px 30px 30px 30px ;
}
</style>